<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('路线地图')" />
</head>
<body class="white-bg">
    <div id="map" style="width: 100%;height: 98vh;">

    </div>
<div th:include="include::footer"></div>
<div th:include="include::map"></div>
<script th:inline="javascript">
    var map;
    var prefix = ctx + "roadnet/baseRoadwaysection";
    var features = new L.FeatureGroup();
    var data=[[${list}]];
    $(function () {
        LoadMap();
        Addleayer();
    });
    function LoadMap() {
        InitializeMap(32.223, 120.977, 9, 9);
    }
    function Addleayer () {

        $.each(data, function (i) {
            var shape = data[i].shape;
            var wkt_geom = shape;
            var wicket = new Wkt.Wkt();
            wicket.read(wkt_geom);
            var color;
            if (data[i].roadsectionid % 2 == 1) { color = "#00a0e9"; }
            if (data[i].roadsectionid % 2 == 0) { color = "#00479d"; }

            var wit = wicket.toObject({
                "color": color,
                "weight": 8
            });
            features.addLayer(wit);
            map.fitBounds(features.getBounds());

            var shapeOld = new Array();
            shapeOld[0] = data[i].y;
            shapeOld[1] = data[i].x;
            if (i == 0) shapeFirst = shapeOld;

            var myIcon = L.icon({
                iconUrl: 'my-icon.png',
                iconSize: [0, 0],
                iconAnchor: [10000, 10000],
                shadowUrl: 'my-icon-shadow.png',
                shadowSize: [0, 0],
                shadowAnchor: [10000, 10000]
            });
            var StartNum = data[i].startnum.toString();
            var EndNum = data[i].endnum.toString();
            var show = data[i].roadsectionid + "  (K" + StartNum + " - K" + EndNum + ")";
            var RoadCode = data[i].roadcode;
            var RoadName = data[i].roadname;
            var StartName = data[i].startname;
            var EndName = data[i].endname;
            var RebuildYear = "";
            if (data[i].RebuildYear != null) RebuildYear = data[i].RebuildYear;
            else
                RebuildYear = "空";

            var zh_start = convertToKPlus(parseFloat(StartNum));
            var zh_end = convertToKPlus(parseFloat(EndNum));
            var techLevelName = data[i].TechLevel;
            switch (techLevelName) {
                case 10:
                    techLevelName = "高速";
                    break;
                case 11:
                    techLevelName = "一级";
                    break;
                case 12:
                    techLevelName = "二级";
                    break;
                case 13:
                    techLevelName = "三级";
                    break;
                case 14:
                    techLevelName = "四级";
                    break;
                case 30:
                    techLevelName = "等外";
                    break;
                default:
                    break;
            }

            var popUpInf = "<div id='popUpInf" + i + "'><div class='' style='cursor: move;border-bottom: 1px solid #D5D5D5;font-weight: bold;' move='ok'>路线基本信息</div>" +
                "<div id='popDiv' style='width: 300px; height: 240px; margin-top: 10px;'>" +
                "<table style='width: 100%; height: 100%;'>" +
                "<tr>" +
                "<td class='tdclass'>名称：</td>" +
                "<td><div id = 'codeM' style = 'width: 200px;  '>" + RoadName + "</div></td>" +
                " </tr> " +
                "<tr>" +
                "<td class='tdclass'>编码：</td>" +
                "<td style='text-align:left;'><div id = 'codeM' style = 'width:180px;  '>" + RoadCode + "</div></td>" +
                " </tr> " +
                "<tr>" +
                "<td class='tdclass'>起止路段：</td>" +
                "<td><div id = 'codeM' style = 'width: 200px; '>" + StartName + "--" + EndName + "</div></td>" +
                " </tr> " +
                "<tr>" +
                "<td class='tdclass'>起止桩号：</td>" +
                "<td><div id = 'codeM' style = 'width: 200px; '>" + zh_start + "--" + zh_end + "</div></td>" +
                " </tr> " +
                "<tr>" +
                "<td class='tdclass'>路基宽度：</td>" +
                "<td><div id = 'codeM' style = 'width: 200px; '>" + data[i].roadbedwidth + "(米)" + "</div></td>" +
                " </tr> " +
                "<tr>" +
                "<td class='tdclass'>路面宽度：</td>" +
                "<td><div id = 'codeM' style = 'width: 200px; '>" + data[i].roadsurfacewindth + "(米)" +
                " </tr> " +
                "<tr>" +
                "<td class='tdclass'>建造年份：</td>" +
                "<td><div id = 'codeM' style = 'width: 200px; '>" + data[i].buildyear + "(年)</div></td>" +
                " </tr> " +
                "<tr>" +
                "<td class='tdclass'>所属机构：</td>" +
                "<td><div id = 'codeM' style = 'width: 200px; '>" + data[i].maintainunitname + "</div></td>" +
                " </tr> " +
                "<tr>" +
                "<td class='tdclass'><a class='btn btn-primary' style='color:white;' id='ViewDeatil' onclick=$.operate.detailForm('" + data[i].id +"','"+prefix+"/view/{id}"+ "') style='cursor:pointer'>查看详情</a></td>" +
                "</tr> " +
                "</table >" +
                "</div>" +
                "</div>";

            //getPhotoPath("R", data[i].GUID);
            L.marker([shapeOld[1], shapeOld[0]], { icon: myIcon }).bindTooltip(show, { permanent: true, interactive: true })
                .bindPopup(popUpInf)
                .addTo(features).openTooltip();
            map.addLayer(features);
            if (shapeFirst != undefined)
                map.setView([shapeFirst[1], shapeFirst[0]], 13);
            //$('#' + this.id).setSelection(selectedRowIndex, false);

        });
    }
    function convertToKPlus(num) {
        return 'K' + num.toFixed(3).replace('.', '+');
    }
</script>
</body>
</html>
